<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>北京站智能网格化管理系统</title>
    <link rel="stylesheet" type="text/css" href="../lib/css/common.css">
    <link rel="stylesheet" href="../lib/css/iconFont/iconfont.css">
    <!-- <link rel="stylesheet" type="text/css" href="../lib//css/count.css"> -->
    <link rel="stylesheet" href="../lib/css/pagination.css">
    <!-- <link rel="stylesheet" type="text/css" href="../lib//css/station.css"> -->
    <link rel="stylesheet" type="text/css" href="../lib/css/jquery.datetimepicker.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/select2.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/newcount.css">
</head>
<body>
<div class="station_grid wraper">
    <div class="searchwrap">
        <!-- 月季年 -->
        <div class="searchelm searchtime2">
            <select name="grouptype" id="grouptype" class="select_option grouptype">
                <option value="1">部门</option>
                <option value="2">人员</option>
            </select>
            <div class="select2_wrap groupwrap" style="min-width:10rem;max-width:30%">
                <input type="hidden" id="userid" />
                <!-- <input type="hidden" id="userid" /> -->
                <div id="user" class="search_control groupselect tagselect" style="width:100%;"></div>
                <!-- <div class="groudtree"></div> -->
            </div>
            <div class="select2_wrap selectInfo" style="min-width:12rem;max-width:60%">
                <select name="info" id="info" class="info" style="width:100%;">
                        <!-- <option value="1">脱岗次数</option> -->
                        <option value="2">接单量</option>
                        <option value="3">完成量</option>
                        <!-- <option value="4">设备巡检次数</option> -->
                        <option value="5">维修次数</option>
                        <option value="6">安全上报信息</option>
                        <option value="7">卫生上报信息</option>
                        <option value="8">设备故障上报</option>
                        <option value="9">量化任务未完成</option>
                        <option value="10">量化任务完成</option>
                </select>    
            </div>
            
            <select name="" class="select_option select_option0 select_option3" id="select_year">
                <option value="1" class="option_year">年</option>
                <option value="2" class="option_quart">季</option>
                <option value="3" class="option_month">月</option>
            </select>
            <select name="" class="select_option" id="select_month">
                <!-- <option value="">2017</option> -->
            </select>
            <select name="" class="select_option select_quarter3" id="select_quarter">
                <!-- <option value=""></option> -->
            </select>
            <input type="button" value="查询" id="lookUp2" class="lookUp" />
        </div>
        <!-- 图表导出 切换 -->
        <div class="tabbar clearfix">
            <ul class="tab">
                <li class="tab_li tab_li_click"><i class="icon iconfont icon-tubiao"></i>图形</li>
                <li class="tab_li"><i class="icon iconfont icon-biaoge"></i>表格</li>
                <li class="tab_li" id="export_file"><i class="icon iconfont icon-daochu"></i>导出</li>
            </ul>
        </div> 
    </div>
    <!-- echarts统计图表 -->
    <div class="main_content">
        <!-- 人员作业量信息对比 -->
        <div class="mcharts nan" id="chart" style="width:100%;height:100%;"></div>
        <!-- 人员表格 -->
        <div class="station_shaow_detail nan" style="display:none">
            <table class="station_shaow_detail_table">
                <caption style="font-size: 2.4rem;">人员作业量信息对比</caption>
            </table>
                <div class="M-box1" style="font-size:10px;text-align:center;" id="page_string">
            </div>
        </div>
        <div class="lds-css block">
            <div class="lds-dual-ring">
                <div></div>
            </div>
        </div>
    </div>
</div>
</body>
<!-- <script type="text/javascript" src="/assets/js/jquery.1.10.1.js"></script> -->
<script type="text/javascript" src="../lib/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../lib/js/base.js"></script>
<script type="text/javascript" src="../lib/js/datetimepicker.js"></script>
<script type="text/javascript" src="../lib/js/jquery.pagination.js"></script>
<script type="text/javascript" src="../lib/js/select2.full.min.js"></script>
<script type="text/javascript" src="../lib/js/echarts.js"></script>
<script type="text/javascript" src="../lib/js/depchoice/edep_plugin.js"></script>
<script type="text/javascript" src="../lib/js/ztreeJs.js"></script>
<script type="text/javascript" src="../lib/js/count.js"></script>
<script type="text/javascript">
var chart=echarts.init(document.getElementById("chart"));
var page = 1,libs=0
//查询
$("#lookUp2").click(function () {
    console.log(page)
    //统计表
    var type = $("#select_year option:selected").val();
    var year = $("#select_month option:selected").val();
    var quarter = $("#select_quarter option:selected").val();
    var _data = {
        page:page,
        type:type,
        year:year,
        month:'',
        quarter:'',
        check_types:$('.info').val(),
        user_type:$('.grouptype').val(),
        user_ids:$('#userid').val() == ''?[]:$('#userid').val().split(',')
    }
    if(type == '1'){
        //year
        _data.month = ''
        _data.quarter = ''

    }else if(type == '2'){
        //quarter
        _data.month = ''
        _data.quarter = quarter
    }else if(type == '3'){
        //month
        _data.month = quarter
        _data.quarter = ''
    }
    deviceGridRepairTableChart(_data)
    // deviceGridRepairChart(_data)
});

//统计图
function deviceGridRepairChart(data){
    $('.lds-css').addClass('block')
    //统计图
    var _data = data
    $.ajax({
        url: serverUrl.base+serverUrl.count+'device_trouble_chart',
        type:"POST",
        data: _data,
        dataType:"json",
        success: function (res) 
        {
            if(libs == '0'){
                $('.lds-css').removeClass('block')
            }
            // 根据数据库取到结果拼接现在结果
            var _data = res.data
            _data.title = '各网格内设备故障统计'
            _data.legend=['设备总数','损坏次数']
            refreshChart(_data);
        }
    });
}
//表格
function deviceGridRepairTableChart(data){
    $('.lds-css').addClass('block')
    var _data = data
    $.ajax({
        url: serverUrl.base+serverUrl.count+'user_list',
        type:"POST",
        data: _data,
        dataType:"json",
        success: function (res) {
            // 根据数据库取到结果拼接现在结果
            var _data = res.data
            $('.station_shaow_detail_table').find('thead').remove()
            var _type=$('.grouptype').val()
            if(_type == '1'){
                $('.station_shaow_detail_table').createTable({data:_data,columns:[
                    // {name:'工号',field:'user_account',w:'4rem'},
                    {name:'所属部门',field:'department_name',w:'4rem'},
                    // {name:'姓名',field:'user_name',w:'10rem'},
                    // {name:'脱岗次数',field:'device_type_name',w:'10rem'},
                    {name:'接单量',field:'task_receive_num',w:'8rem'},
                    {name:'完成量',field:'task_done_num',w:'8rem'},
                    // {name:'设备巡检次数',field:'report_num',w:'8rem'},
                    {name:'维修次数',field:'device_repair_num',w:'8rem'},
                    {name:'安全上报信息',field:'safe_report_num',w:'8rem'},
                    {name:'卫生上报信息',field:'health_report_num',w:'8rem'},
                    {name:'设备故障上报',field:'device_report_num',w:'8rem'},
                    {name:'量化任务未完成',field:'not_done_num',w:'8rem'},
                    {name:'量化任务完成',field:'done_num',w:'8rem'}
                ]})
            }else{
                $('.station_shaow_detail_table').createTable({data:_data,columns:[
                    {name:'工号',field:'user_account',w:'4rem'},
                    {name:'所属部门',field:'department_name',w:'4rem'},
                    {name:'姓名',field:'user_name',w:'10rem'},
                    // {name:'脱岗次数',field:'device_type_name',w:'10rem'},
                    {name:'接单量',field:'task_receive_num',w:'8rem'},
                    {name:'完成量',field:'task_done_num',w:'8rem'},
                    // {name:'设备巡检次数',field:'report_num',w:'8rem'},
                    {name:'维修次数',field:'device_repair_num',w:'8rem'},
                    {name:'安全上报信息',field:'safe_report_num',w:'8rem'},
                    {name:'卫生上报信息',field:'health_report_num',w:'8rem'},
                    {name:'设备故障上报',field:'device_report_num',w:'8rem'},
                    {name:'量化任务未完成',field:'not_done_num',w:'8rem'},
                    {name:'量化任务完成',field:'done_num',w:'8rem'}
                ]})    
            }
            $("#page_string").html(res.result_page);
            // 根据数据库取到结果拼接现在结果
            var _data = res.datachart
            _data.title = '人员作业量信息对比'
            var _types = $('.info').select2('data')
            _data.legend=[]
            for(var i=0;i<_types.length;i++){
                _data.legend.push(_types[i].text)
            }
            refreshChart(_data);
            
            
            
        },
        complete:function(){
            $('.lds-css').removeClass('block')
        },
        error:function(){
            console.log('error')
        }
    });
}

//统计图 样式
function refreshChart(data){
    
    var _data=data
    var _series = []
    for(var i=0;i< _data.chartxdata.length;i++){
        _series.push({
            name:_data.legend[i],
            type:"bar",
            barGap: 0,
            data:_data.chartxdata[i]
        })
    }
    var _opts={
        title:{
            text:_data.title,
            x:"center",
            y:"top",
            textStyle:{
                color:"#fff",
                fontSize:30
            }
        },
        tooltip:{
            trigger:"axis",
            axisPointer:{
                type:"shadow"
            },
        },
        legend:{
            data:_data.legend,//标记名
            right:"10%",
            y:"15%",
            textStyle:{
                color:"#fff",
                fontSize:16,
            }
        },
        toolbox: {
            show: true,
            feature: {
                saveAsImage: {
                    show:true,
                    excludeComponents :['toolbox'],
                    pixelRatio: 2
                }
            }
        },
        grid:{
            left:'14%',
            right:'10%',
            bootom:"3%",
            top:"30%",
            vontainLabel:true
        },
        xAxis:{
            type:"category",
            data:_data.chartxname,
            axisLabel:{
                show:true,
                textStyle:{
                    color:"#fff"
                }
            }
        },
        yAxis:{
            type:"value",
            axisLabel:{
                show:true,
                textStyle:{
                    color:"#fff"
                }
            }
        },
        toolbox: {
            show: true,
            feature: {
                saveAsImage: {
                    show:true,
                    excludeComponents :['toolbox'],
                    pixelRatio: 2,
                    left:"right"
                }
            }
        }

    }
    if(_data.subtext){
        _opts.title.subtext = _data.subtext 
        _opts.title.subtextStyle = {
            fontSize:15,
            color:"#AAAAAA"
        }
    }
    if(_data.color){
        _opts.color = ['#C23531','#2F4554','#61A0A8','#D48265','#91C7AE','#756BA0','#CA8622','#BDA29A','#ABDC45','#00C4BD']
    }

    _opts.series = _series

    chart.setOption(_opts)
}

$(function(){
    time()
})

function common_request(elm){
    if(arguments[0]){
        page = arguments[0]
        console.log(page)
    }else{
        page = 1
    }
    $("#lookUp2").click()     
}
//查询
function search_(){
    page = 1 ;
    common_request(1);  
}
$('.tab_li_click').click()
//tab初始化
$('.tab .tab_li').each(function(index,elm){
    //console.log(index,elm)
    $(this).data('val',index)
})
//图表切换后的操作
$('.tab_li').on('click',function(elm){
    var $this = $(this)
    var _ids = $this.data('val')?$this.data('val'):$this.index()
    if(_ids== '0'){
        $('.selectInfo').show()
        $(".count_classifyAll").show();
        $(".educe").removeClass("addli")
        libs = '0'
    }else if(_ids== '1'){
        $('.selectInfo').hide()
        $(".count_classifyAll").hide();
        $(".educe").addClass("addli");
        libs = '1'
    }else if(_ids== '2'){
        //导出按钮
        var type = $("#select_year option:selected").val();
        var year = $("#select_month option:selected").val();
        var quarter = $("#select_quarter option:selected").val();
        var _data = {
            type:type,
            year:year,
            month:'',
            quarter:'',
            check_types:$('.info').val(),
            user_type:$('.grouptype').val(),
            user_ids:$('#userid').val().split(',')
        }
        if(type == '1'){
            //year
            _data.month = ''
            _data.quarter = ''

        }else if(type == '2'){
            //quarter
            _data.month = ''
            _data.quarter = quarter
        }else if(type == '3'){
            //month
            _data.month = quarter
            _data.quarter = ''
        }
        var _url=serverUrl.base + serverUrl.countD + 'user_list?type='+encodeURIComponent(_data.type)+'&year='+encodeURIComponent(_data.year)+'&month='+encodeURIComponent(_data.month)+'&user_type='+encodeURIComponent(_data.user_type)+'&user_ids='+encodeURIComponent(_data.user_ids)
        window.location.href = _url;return;
    }
})
$('.grouptype').on('change',function(){
    var $this = $(this)
    var type = $this.val()
    $('#user').html('')
    $('#userid').val('')
    if(type == '1'){
        //(id,uid,type,vid)
        showsDeptWin('user','userid','6',false)
    }else{
        showsDeptWin('user','userid','5',false)
    }
})
$('.groupwrap').on('click',function(){
    var type = $('.grouptype').val()
    if(type == '1'){
        //(id,uid,type,vid)
        showsDeptWin('user','userid','6',false)
    }else{
        showsDeptWin('user','userid','5',false)
    }
})
$('.info').select2({multiple:true,placeholder:'请选择范围',closeOnSelect:false})
$('.info').val(['2','3']).trigger('change')
// var _data =[
//     {id:'1',text:'脱岗次数'},
//     {id:'2',text:'接单量'},
//     {id:'3',text:'完成量'},
//     {id:'4',text:'设备巡检次数'},
//     {id:'5',text:'维修次数'},
//     {id:'6',text:'安全上报信息'},
//     {id:'7',text:'卫生上报信息'},
//     {id:'8',text:'设备故障上报'},
//     {id:'9',text:'量化任务未完成'},
//     {id:'10',text:'量化任务完成'}
// ]
// $('.info').rpSelect({datas:_data,multiple:true,placeholder:'请选择范围'})
// $('.info').val(['2','3']).trigger('change')
// setTimeout(function(){
//     $('.info').val(['2','3']).trigger('change') 
// },0)



</script>
</html>

